function Enlarger(select) {
   
    this.ele = document.querySelector(select);
    this.show = this.ele.querySelector('.img');
    this.mask = this.ele.querySelector('.mask');
    this.list = this.ele.querySelector('.small_img');
    this.enlarge = this.ele.querySelector('.big_img');
  
    this.show_width = this.show.offsetWidth;
    this.show_height = this.show.offsetHeight;
    this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width);
    this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height);
    this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0]);
    this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1]);
    
    this.justifyMask();
    this.overOut();
    // this.changePic();
    this.move();
  
    
    // console.log('我要创建生产对象，这个对象可以完成放大镜功能')
   
  
  }
  
  //2.调整mask的尺寸
  Enlarger.prototype.justifyMask = function() {
    this.mask_width = this.show_width * this.enlarge_width / this.bg_width;
    this.mask_height = this.show_height * this.enlarge_height / this.bg_height;
    this.mask.style.width = this.mask_width + 'px';
    this.mask.style.height = this.mask_height + 'px';
  }
  
  //3.移入移出
  Enlarger.prototype.overOut = function() {
    this.show.addEventListener('mouseover', () => {
      this.mask.style.display = 'block';
      this.enlarge.style.display = 'block';
    })
    this.show.addEventListener('mouseout', () => {
      this.mask.style.display = 'none';
      this.enlarge.style.display = 'none';
    })
  }
//   4.切换图片
//   Enlarger.prototype.changePic = function() {
//     this.list.addEventListener('click', e => {
//       e = e || window.event;
//       const target = e.target || e.srcElement;
//       if(target.tagName === 'IMG'){
//         const showSrc = target.dataset.show;
//         const enlargeUrl = target.dataset.enlarge;
//         this.show.firstElementChild.src = showSrc;
//         this.enlarge.style.backgroundImage = `url(${enlargeUrl})`;
//         for(let i = 0; i<this.list.children.length; i++) {
//           this.list.children[i].classList.remove('active');
//         target.parentElement.classList.add('active');
//         }
//       }
//     })
//   }
  
  //5.移动
  Enlarger.prototype.move = function() {
    this.show.addEventListener('mousemove' , e => {
      e = e || window.event;
      let x = e.offsetX - this.mask_width / 2;
      let y = e.offsetY - this.mask_height / 2;
      // console.log(x,y);
      if(x <= 0) x = 0;
      if(y <= 0) y = 0;
      if(x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width;
      if(y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height;
      this.mask.style.left = x + 'px';
      this.mask.style.top = y + 'px';
      const ratioX = this.bg_width / this.show_width;
      const ratioY = this.bg_height / this.show_height;
      this.enlarge.style.backgroundPosition = `-${x * ratioX}px -${y * ratioY}px`;
  
  
    })
  }